<template>
	<view style="margin: 1rem;">
		<view style="margin-bottom: 1rem;">
			<button type="primary" v-if="current" @click="flipMode">{{ current.mode }}</button>
		</view>

		<view v-if="current?.mode=='24小时'">
			<view style="display: flex; justify-content: center;">
				<!-- 左边显示的小时列表 -->
				<view class="main mainDiv" style="flex-direction: column;align-items: center;">
					<view class="itemCaption" style="width: 180px;">
						小时
					</view>
					<view style="width: 180px;">
						<uni-grid :column="2" :showBorder="false" :square="false">
							<uni-grid-item v-for="(hour,index) in hourList" :key="index" :clickable="true"
								@click="hourClick(index)"
								:style="{'color': 'gray', 'background-color' : (index==currentHour?'#ffff99': '' )}">
								<view class="griditem">
									<view style="text-align: center;width: 100%;">
										<view style="font-size: 18px;font-weight: bold;color: gray;">{{ hour }}
										</view>
										<view style="font-size: 18px;color: gray; color: green;"></view>
									</view>
								</view>
							</uni-grid-item>
						</uni-grid>
					</view>
				</view>
				<!-- 右边显示的分钟列表 -->
				<view class="main" style="flex-direction: column; align-items: center;">
					<view class="itemCaption" style="width: 130px;">
						分钟
					</view>
					<view class="main mainDiv">
						<view style="width: 65px;">
							<uni-list :border="false">
								<uni-list-item v-for="(minute,index) in minute1List" :clickable="true" thumb-size="base"
									ellipsis="2" :key="index" @click="minute1Click(index)" :border="false"
									:style="{'color': 'gray', 'background-color' : (index==currentMinute1?'#ffff99': '' )}">
									<template v-slot:body>
										<text style="font-size: 18px;text-align: center;width: 100%; font-weight: bold;"
											:class="{ 'itemSelected': index == currentMinute1 }">
											{{ minute }}
										</text>
									</template>
								</uni-list-item>
							</uni-list>
						</view>
						<view style="width: 65px;">
							<uni-list :border="false">
								<uni-list-item v-for="(minute,index) in minute2List" :clickable="true" thumb-size="base"
									ellipsis="2" :key="index" @click="minute2Click(index)" :border="false"
									:style="{'color': 'gray', 'background-color' : (index==currentMinute2?'#ffff99': '' )}">
									<template v-slot:body>
										<text style="font-size: 18px;text-align: center;width: 100%; font-weight: bold;"
											:class="{ 'itemSelected': index == currentMinute2 }">
											{{ minute }}
										</text>
									</template>
								</uni-list-item>
							</uni-list>
						</view>
					</view>
					<view class="time">
						{{currentHour<24?currentHour.toString()+":"+currentMinute1.toString()+currentMinute2.toString():''}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="current?.mode=='十二时辰'" class="main" style="justify-content: center;">
			<view style="width: 200px;">
				<uni-grid :column="2" :showBorder="false" :square="false">
					<uni-grid-item v-for="(shichen,index) in ShichenList" :key="index" :clickable="true"
						@click="ShichenClick(index)"
						:style="{'color': 'gray', 'background-color' : (index==currentShiChen?'#ffff99': '' )}">
						<view class="griditem">
							<view style="text-align: center;width: 100%;">
								<view style="font-size: 18px;font-weight: bold;color: gray;">{{ shichen[0] }}
								</view>
								<view style="font-size: 18px;color: gray; color: green;">{{shichen[1]}}</view>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view v-if="current?.mode=='24小时'" style="margin-top: 1rem;">
			<button type="primary" v-if="current" @click="submit">确定{{currentInfo?"("+currentInfo+")":""}}</button>
		</view>
	</view>
</template>

<script lang="ts">
	import { HourItem } from './entity';
	import { dateUtil } from '../../common/dateUtil';
	import { ChinaDate } from '../../common/ChinaDate'
	import { SiZhu } from '../../common/sizhu';
	import { GanZhi } from '../../common/ganzhi';

	export default {
		data() {
			return {
				current: undefined as HourItem,
				hourList: ['00时 子', '01时 丑', '02时 丑', '03时 寅', '04时 寅', '05时 卯', '06时 卯', '07时 辰', '08时 辰', '09时 巳', '10时 巳', '11时 午', '12时 午', '13时 未', '14时 未', '15时 申', '16时 申', '17时 酉', '18时 酉', '19时 戌', '20时 戌', '21时 亥', '22时 亥', '23时 子', '不知道'],
				currentHour: 0,
				minute1List: ['0', '1', '2', '3', '4', '5'],
				currentMinute1: 0,
				minute2List: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
				currentMinute2: 0,
				ShichenList: [
					['子时', '-1 ~ 01点'],
					['丑时', '01 ~ 03点'],
					['寅时', '03 ~ 05点'],
					['卯时', '05 ~ 07点'],
					['辰时', '07 ~ 09点'],
					['巳时', '09 ~ 11点'],
					['午时', '11 ~ 13点'],
					['未时', '13 ~ 15点'],
					['申时', '15 ~ 17点'],
					['酉时', '17 ~ 19点'],
					['戌时', '19 ~ 21点'],
					['亥时', '21 ~ 23点'],
					['不知道']
				],
				currentShiChen: 0,
				currentInfo: "",
			}
		},
		mounted() {
			const eventChannel : UniApp.EventChannel = (this as any).getOpenerEventChannel();
			eventChannel.on('init', (item : HourItem) => {
				this.current = item;
				let hour = item.hasHour ? (item.hour ?? 0) : 24;
				this.currentHour = hour;
				this.currentShiChen = Math.floor(((hour + 1) % 24) / 2);
				if (item.minute) {
					this.currentMinute1 = Math.floor(item.minute / 10);
					this.currentMinute2 = Math.floor(item.minute % 10);
				}
				if (!item.hasHour) {
					this.currentHour = 24;
					this.currentShiChen = 12;
				}
				this.refreshInfo();
			})
		},
		methods: {
			flipMode() {
				this.current.mode = this.current.mode == '24小时' ? '十二时辰' : '24小时';
			},
			hourClick(hourIndex : number) {
				this.currentHour = hourIndex;
				this.currentShiChen = hourIndex == 24 ? 12 : Math.floor(((hourIndex + 1) % 24) / 2);
			},
			minute1Click(minuteIndex : number) {
				this.currentMinute1 = minuteIndex;
			},
			minute2Click(minuteIndex : number) {
				this.currentMinute2 = minuteIndex;
			},
			ShichenClick(shichenIndex : number) {
				this.currentShiChen = shichenIndex;
				this.currentMinute1 = 0;
				this.currentMinute2 = 0;
				this.currentHour = shichenIndex * 2;
				this.submit();
			},
			refreshInfo() {
				if (this.currentShiChen < 12 && this.current.dayGanzhi) {
					this.currentInfo = GanZhi.createHourGanzhi(this.current.dayGanzhi.TianGan + (this.currentHour == 23 ? 1 : 0), this.currentShiChen).getText();
				} else {
					this.currentInfo = "";
				}
			},
			submit() {
				this.current.hour = this.currentHour == 24 ? 0 : this.currentHour;
				this.current.hasHour = this.currentHour < 24;
				this.current.minute = this.currentMinute1 * 10 + this.currentMinute2;
				// 获取事件通道
				const eventChannel : UniApp.EventChannel = (this as any).getOpenerEventChannel();
				// 先返回上一页
				uni.navigateBack();
				// 发送数据（注意：必须在navigateBack之后执行，否则页面已销毁）
				eventChannel.emit('selected', this.current);
			}
		},
		watch: {
			currentHour: 'refreshInfo'
		}
	}
</script>

<style>
	.main {
		display: flex;
		flex-grow: 1;
		flex-shrink: 0;
	}

	.mainDiv {
		justify-content: center;
		/* background-color: #eeffff; */
	}

	.griditem {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}

	.itemCaption {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		color: #9999ff;
		background-color: #ffddff;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		margin-bottom: 0.5rem;
	}

	.time {
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		color: green;
		background-color: #eeeeee;
		padding: 0.5rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}
</style>